<!--
  @文件名：mainView
  @来源：Winford.Wang|2022/10/31 0031，13:46
  @描述：
-->
<template>
  <div class="mainView">
    <div class="mainView-head">
      <div class="mainView-head-title">
        <img src="../assets/logo.png" width="15"/>
        <span> 布局上的测试功能</span>
      </div>
      <div class="mainView-head-btns">
        <el-icon><SemiSelect /></el-icon>
        <el-icon><FullScreen /></el-icon>
        <el-icon><CloseBold /></el-icon>
      </div>
    </div>
    <div class="mainView-body">
      <div class="mian_left" :class="[isActive?'mian_left_active':'',isActiveAnim?(isActive?'mainLeft_out':' mainLeft_in'):'']" >
        <el-scrollbar >
          <el-menu
            :class="isActiveAnim&&(isActive?'mainLeft_out':' mainLeft_in')"
            style="border-right:none"
            :collapse-transition="false"
            :collapse="!isActive"
            :default-active="defaultActive"
            router
          >
            <el-menu-item index="/startView">
              <el-icon><setting /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>功能页</span>
              </template>
              <el-menu-item-group title="只是分组">
                <el-menu-item index="/homeView">皮肤</el-menu-item>
                <el-menu-item index="/twoView">右键测试</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="/thereview">
              <el-icon><Odometer /></el-icon>
              <span>功能3</span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="mian_right" :class="[isActive?'mian_right_active':'',isActiveAnim?(isActive?'mainRight_out':' mainRight_in'):'']">
        <div class="mainBase">
          <div class="mainBase_head">
            <el-icon @click="leftWidth" v-if="isActive"><Fold /></el-icon>
            <el-icon @click="leftWidth" v-else><Expand /></el-icon>
            <div class="mainBase_head_bread">
              <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadList" :key="item.name">
                  {{item.meta&&item.meta.title}}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div>
              <el-avatar :size="35"> user </el-avatar> 头像
            </div>
          </div>
          <div class="mainBase_body">
            <router-view v-slot="{ Component }">
              <transition enter-active-class="animate__animated animate__fadeIn">
                <component :is="Component" />
              </transition>
            </router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'mainView',
  data () {
    return {
      isActive: true,
      isActiveAnim: false,
      breadList: []
    }
  },
  created () {

  },
  computed: {
    defaultActive () {
      return this.$route.path
    }
  },
  mounted () {
    this.getBreadcrumb()
  },
  activated () {

  },
  methods: {
    leftWidth () {
      this.isActiveAnim = true
      this.isActive = !this.isActive
    },
    getBreadcrumb () {
      let matched = this.$route.matched
      // 如果不是首页
      if (matched[0].name !== 'mainView') {
        matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
      }
      this.breadList = matched
    }

  },
  deactivated () {

  },
  unmounted () {

  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  },
  components: {}
}
</script>

<style scoped lang='scss'>
.mainView {
  background-color: #f5f5ff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .mainView-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: white;
    height: 30px;
    box-sizing: border-box;
    padding: 0 5px;
    .mainView-head-title{
      display: flex;
      align-items: center;
      font-size: 14px;
    }
    .mainView-head-btns{
      display: flex;
      align-items: center;
      .el-icon{
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }
  .mainView-body{
    height: calc(100% - 35px);
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    .mian_left{
      width: 64px;
      box-sizing: border-box;
      height: 100%;
      background-color: white;
      overflow: hidden;
      border-top-right-radius: 4px;
    }
    .mian_right{
      width: calc(100% - 64px);
      box-sizing: border-box;
      height: 100%;
      padding: 0px 0px 0px 10px;
      .mainBase{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        .mainBase_head{
          border-radius: 4px;
          background-color: white;
          height: 45px;
          width: 100%;
          box-sizing: border-box;
          overflow: hidden;
          display: flex;
          align-items: center;
          padding: 0 10px;
          justify-content: space-between;
          .mainBase_head_bread{
            margin-left: 10px;
            flex: 1;
          }
        }
        .mainBase_body{
          border-radius: 4px;
          background-color: white;
          overflow: hidden;
          height: calc(100% - 50px);
          margin-top: 5px;
          width: 100%;
          box-sizing: border-box;
          padding: 5px 10px;
        }
      }
    }

    .mian_left_active{
      width: 200px;
    }
    .mian_right_active{
      width: calc(100% - 200px);
    }

    .mainLeft_in{
      animation: mainLeft_in 0.5s ease;
    }
    .mainLeft_out{
      animation: mainLeft_out 0.5s ease;
    }
    @keyframes mainLeft_in {
      0% {
        width: 200px;
      }
      100% {
        width: 64px;
      }
    }
    @keyframes mainLeft_out {
      0% {
        width: 64px;
      }
      100% {
        width: 200px;
      }
    }

    .mainRight_in{
      animation: mainRight_in 0.5s ease;
    }
    .mainRight_out{
      animation: mainRight_out 0.5s ease;
    }
    @keyframes mainRight_in {
      0% {
        width: calc(100% - 200px);
      }
      100% {
        width: calc(100% - 64px);
      }
    }
    @keyframes mainRight_out {
      0% {
        width: calc(100% - 64px);
      }
      100% {
        width: calc(100% - 200px);
      }
    }

  }
}
</style>
